<template>
  <div class="back_white">
    <div>
      <el-form inline>
        <el-form-item label="所属订单编号">
          <el-input v-model="searchDto.orderId"></el-input>
        </el-form-item>
        <el-form-item label="所属用户">
          <el-input v-model="searchDto.userId"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select
              v-model="searchDto.state"
              placeholder="Select"
              size="large"
              style="width: 240px"
          >
            <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="button">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="orderItemList" show-overflow-tooltip="true" border>
        <el-table-column label="商品图片">
          <template #default="scope">
            <el-image :src="$imgBaseUrl+scope.row.skuPic"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="ID" prop="id"/>
        <el-table-column label="所属订单" prop="orderId"/>
        <el-table-column label="商品编号" prop="skuId"></el-table-column>
        <el-table-column label="商品名字" prop="skuName" ></el-table-column>
        <el-table-column label="spu" prop="spuId"></el-table-column>
        <el-table-column label="sku" prop="skuId"></el-table-column>
        <el-table-column label="分类" prop="categoryId"></el-table-column>
        <el-table-column label="sku价格" prop="sku_price"></el-table-column>
        <el-table-column label="数量" prop="skuQuantity"></el-table-column>
        <el-table-column label="销售属性组合" prop="skuAttrsVals"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <button @click="openInfo(scope.row)">修改/查看详情</button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="prev, pager, next"  v-model:current-page="searchDto.pageNum"
                       v-model:page-size="searchDto.pageSize" :total="searchDto.total"
        />
      </div>
    </div>
  </div>
  <div>
    <el-dialog
        v-model="infoDialog"
        title="Tips"
        width="500"
    >
      <div>
        <el-descriptions
            class="margin-top"
            title="With border"
            :column="3"
            :size="size"
            border
        >
          <template #extra>
            <el-button type="primary">Operation</el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                编号
              </div>
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, watch} from "vue";
import {useRoute} from "vue-router";
import {getBusinessOrderItems} from "@/api/home/order/order";

let route = useRoute()
let orderItemList = ref([])
let infoDialog = ref(false)
let selectOrderItem = ref()
let searchDto = reactive({
  pageNum: 1,
  pageSize: 5,
  total: 0,
  orderId: route.query.orderId,
  state: -1,
  userId:null
})
let statusOptions = [
  {label: '全部', value: -1},
  {label: '未支付', value: 0},
  {label: '未发货', value: 1},
  {label: '未收货', value: 2},
  {label: '已完成', value: 3},
  {label: '已关闭', value: 4},
  {label: '失效', value: 5},
]

function getOrderItems() {
  getBusinessOrderItems(searchDto).then(res => {
    orderItemList.value = res.data.records
    searchDto.total = res.data.total - 0
  })
}

function openInfo(orderItemId) {
  selectOrderItem.value = orderItemId
  infoDialog.value = true
}

onMounted(() => {
  getOrderItems()
})
watch(()=>searchDto.pageNum,()=>{
  getOrderItems()
})
</script>

<style scoped>

</style>
